
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">



</head>
<html>
<body>

<div class="layui-colla-item">
    <h2 class="layui-colla-title">查询条件</h2>
    <div class="layui-colla-content layui-show">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">个人查询</li>
                <li>企业查询</li>
                <li>家庭查询</li>
                <li>其他查询</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">其他选项</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="isfg" value="1" title="房管数据" checked>
                                <input type="checkbox" name="is15" value="1" title="15位证号" checked>
                            </div>
                        </div>


                        <div class="layui-form-item">


                            <div class="layui-row">
                                <div class="layui-col-sm4">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="ownname" required lay-verify="required"
                                               placeholder="请输入姓名" autocomplete="off" class="layui-input">
                                    </div>

                                </div>
                                <div class="layui-col-sm4">
                                    <label class="layui-form-label">身份证号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="certno" required lay-verify="required"
                                               placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                                    </div>

                                </div>
                                <div class="layui-col-sm4">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formPerson">立即提交</button>
                                        <button class="layui-btn">读卡</button>
                                    </div>

                                </div>

                            </div>
                        </div>

                    </form>
                </div>

                <div class="layui-tab-item">
                    <div class="layui-container">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">其他选项</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="isfg" value="1" title="房管数据" checked>

                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-row">
                                    <div class="layui-col-sm6">
                                        <label class="layui-form-label">企业名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="coname" required lay-verify="required"
                                                   placeholder="请输入企业名称" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-sm6">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formCo">立即提交</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">其他选项</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="isfg" value="1" title="房管数据" checked>
                                <input type="checkbox" name="is15" value="1" title="15位证号" checked>
                            </div>
                        </div>

                        <div class="layui-form-item" id="firstone">

                            <div class="layui-row">
                                <div class="layui-col-sm4">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="usernames[]" required lay-verify="required"
                                               placeholder="请输入姓名" autocomplete="off" class="layui-input">
                                    </div>

                                </div>
                                <div class="layui-col-sm4">
                                    <label class="layui-form-label">身份证号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="certnos[]" required lay-verify="required"
                                               placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                                    </div>

                                </div>
                                <div class="layui-col-sm4" >
                                    <div class="layui-btn-container" style="margin-left: 20px">
                                        <button class="layui-btn layui-btn-sm" id="addone">
                                            <i class="layui-icon">&#xe654;</i>
                                        </button>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formFamily">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>


                    </form>
                </div>

                <div class="layui-tab-item">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">其他选项</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="isfg" value="1" title="房管数据" checked>
                            </div>
                        </div>


                        <div class="layui-form-item">

                            <div class="layui-row">
                                <div class="layui-col-sm4">
                                    <label class="layui-form-label">产权证号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="cqzh"
                                               placeholder="请输入产权证号" lay-verify="cqzh" autocomplete="off" class="layui-input">
                                    </div>

                                </div>
                                <div class="layui-col-sm4">
                                    <label class="layui-form-label">房屋坐落</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="location"
                                               placeholder="请输入房屋坐落" lay-verify="location" autocomplete="off" class="layui-input">
                                    </div>

                                </div>
                                <div class="layui-col-sm4">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formOther">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-colla-item">
    <h2 class="layui-colla-title">查询结果</h2>
    <div class="layui-colla-content layui-show">
        <div class="layui-row">
            <div class="layui-col-sm4">
                <fieldset class="layui-elem-field" style="margin-top: 50px;">
                    <legend>权利列表 - 不动产</legend>
                    <div class="layui-field-box">

                        <ul class="flow-default" id="fwlist" style="height: 200px;overflow-y: scroll"></ul>


                        </ul>
                    </div>

                </fieldset>
                <fieldset class="layui-elem-field" style="margin-top: 50px;">
                    <legend>权利列表 - 房管</legend>
                    <div class="layui-field-box">

                        <ul class="flow-default" id="fwlist2" style="height: 200px;overflow-y: scroll"></ul>


                        </ul>
                    </div>
                </fieldset>

                <fieldset class="layui-elem-field" style="margin-top: 10px;">
                    <legend>操作</legend>
                    <div class="layui-field-box">

                        <button class="layui-btn layui-btn-sm layui-btn-primary" id="printBtn">
                            <i class="layui-icon">&#xe63c;</i>打印
                        </button>
                    </div>
                </fieldset>

            </div>
            <div class="layui-col-sm8" style="height:700px;overflow-x: scroll">
                <fieldset class="layui-elem-field" style="margin-top: 50px;">
                    <legend>详情展示</legend>
                    <div class="layui-field-box">
                        <div class="layui-tab layui-tab-card">
                            <ul class="layui-tab-title">
                                <li name ="dj" class="layui-this">权利信息</li>
                                <li name="dj">土地使用权登记信息</li>
                                <li name="dj">房地产幢登记信息</li>
                                <li name="dj">房地产户室登记信息</li>
                                <li name="dj">抵押登记信息</li>
                                <li name="dj">查封登记信息</li>
                                <li name="dj">预告登记信息</li>
                                <li name="fc">房产所有权信息</li>
                                <li name="fc">房产基本信息</li>
                                <li name="fc">房产查封登记表</li>
                                <li name="fc">房产他项权利</li>
                                <li name="fc">房产预告登记表</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-container">
                                        <form class="layui-form" id="qlxx" action="">
                                        </form>
                                    </div>
                                </div>
                                <div class="layui-tab-item">内容2</div>
                                <div class="layui-tab-item">内容3</div>
                                <div class="layui-tab-item">内容4</div>
                                <div class="layui-tab-item">
                                    <table class="layui-hide" id="djdy"></table>
                                </div>
                                <div class="layui-tab-item">
                                    <table class="layui-hide" id="djcf"></table>
                                </div>
                                <div class="layui-tab-item">
                                    <table class="layui-hide" id="djyg"></table>
                                </div>
                                <div class="layui-tab-item" id="syqtab">
                                    <form class="layui-form" id="syq" action="">
                                        <div class="layui-form-item">
                                            <div class="layui-row">
                                                <div class="layui-col-sm6">

                                                    <label class="layui-form-label">证号</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="ocertno" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-col-sm6">
                                                    <label class="layui-form-label">权利人</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="name" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-row">
                                                <div class="layui-col-sm6">

                                                    <label class="layui-form-label">身份证号</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="pidno" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-col-sm6">
                                                    <label class="layui-form-label">坐落</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="location" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-row">
                                                <div class="layui-col-sm6">

                                                    <label class="layui-form-label">房屋编号</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="realeunum" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-col-sm6">
                                                    <label class="layui-form-label">业务号</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="keycode" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="layui-form-item">
                                            <div class="layui-row">
                                                <div class="layui-col-sm6">

                                                    <label class="layui-form-label">共有方式</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="otype" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-col-sm6">
                                                    <label class="layui-form-label">房屋取得方式</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="ofrom" autocomplete="off" class="layui-input">
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </form>



                                </div>
                                <div class="layui-tab-item">内容9</div>
                                <div class="layui-tab-item">内容10</div>
                                <div class="layui-tab-item">内容11</div>
                                <div class="layui-tab-item">内容12</div>
                            </div>
                        </div>

                    </div>
                </fieldset>

            </div>

        </div>




    </div>
</div>



<script src="content.js"></script>
<script src="layui/layui.all.js"></script>
<script src="jquery.formautofill.js"></script>
<script>
    function S4() {
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    function guid() {
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
    }
    /*需要一个变量来存储所有的查询结果
    * 以唯一主键为key , 内容Wie获取的item 在渲染<li>时新增
    * */
    var resStore={};
    var element = layui.element;
    var form = layui.form;
    var $ = layui.jquery;
    var flow=layui.flow;
    var table=layui.table;
    /*自定义过滤规则*/
    form.verify({
        cqzh:function (value,item) {
            if(value!=="" && value.length<3){
                return "产权证号至少输入两位";

            }
            
        }
        ,location:function (value,item) {

            if(value!=="" && value.length<3){
                return "房屋坐落条件过短";

            }
        }

    });
    /*每次点击查询时 列表等内容清空*/
    function initContent() {
        $("#fwlist").empty();
        $("#fwlist2").empty();
        $("#qlxx").empty();
        resStore={};//存储的内容也清空
        
    }

    function loadFlow(elem, url, submitdata) {
        flow.load({
            elem: elem //指定列表容器
            ,isAuto: true
            ,scrollElem: elem
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                //模拟数据插入
                submitdata.page=page;
                $.get(url,submitdata,function (res) {
                    var lis = [];
                    layui.each(res.data,function (index,item) {
                        var str='【'+item.realeunum+'】'+item.location;
                        var guidid=guid();
                        lis.push('<li>'+'<input type="checkbox" class="'+elem+'"> '+ '<a id="'+guidid+'" href="#">'+str+'</a>' +'</li>')

                        resStore[guidid]=item;
                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages); //假设总页数为 10


                });

            }

        });


    }

    form.on('submit(formPerson)', function (data) {
        layer.msg(JSON.stringify(data.field));
        initContent();
        var submitdata={
            certno:data.field.certno
        };
        if(data.field.is15){
            submitdata.is15=data.field.is15;

        }
        if(data.field.isfg){
            submitdata.isfg=data.field.isfg;
            loadFlow('#fwlist2','getRoomsByCertno',data.field);
        }
        loadFlow('#fwlist','getRightsByCertno',submitdata);

        return false;

    });
    form.on('submit(formCo)',function (data) {
        var submitdata={
            coname:data.field.coname
        };
        initContent();
        if(data.field.isfg){
            submitdata.isfg=data.field.isfg;
            loadFlow('#fwlist2','getRoomsByName',data.field);
        }
//
        loadFlow('#fwlist','getRightsByName',submitdata);
        return false;


    });
    form.on('submit(formFamily)',function (data) {
        initContent();
        layer.msg(JSON.stringify(data.field));
        if(data.field.isfg){
            loadFlow('#fwlist2','getRoomsByCertno',data.field);
        }

        loadFlow('#fwlist','getRightsByCertno',data.field);

        return false;

    });
    /*家庭查询 增加格子*/
    $('#addone').click(function () {

        $("#firstone").append(appendStr)


    });

    /*其他查询*/
    form.on('submit(formOther)',function (data) {
        initContent();
        if(data.field.cqzh==="" && data.field.location===""){
            layer.msg("请输入查询条件！",{icon:5});

            return false;
        }
        var submitdata={
            cqzh:data.field.cqzh,
            location:data.field.location
        };
        if(data.field.isfg){

            submitdata.isfg=data.field.isfg;
            loadFlow('#fwlist2','getRoomsByLocationOrCqzh',submitdata);
        }
        loadFlow('#fwlist','getRightsByLocationOrCqzh',submitdata);
        return false;

    });
    /*家庭列表 减少*/
    $("#firstone").on("click",".deleteone",function () {
        $(this).closest(".layui-row").remove();

        
    });

    /*不动产列表点击*/
    $("#fwlist").on("click","a",function () {
        var liid=$(this).attr("id");

        console.log($(this).attr("id"));
        var item=resStore[liid];
        console.log(item);
        /*隐藏房管的*/
        $("li[name='fc']").hide();
        $("li[name='dj']").show();
        $("li[name='dj']").eq(0).trigger("click");
        /*判断是证书还是证明*/
        var qlurl;
        $("#qlxx").empty();
        if(item.type==="realestateright"){

            $("#qlxx").append(rightStr);
            qlurl="getRealestaterightById";
        }else{
            $("#qlxx").append(proofStr);
            qlurl="getRealestateproofById";
        }
        $.get(qlurl,{keyId:item.keyId},function (res) {
            /*重新给身份证号和权利人名称赋值*/
            res.obligeename=item.ownname;
            res.certno=item.cernum;
            $("#qlxx").autofill(res);
            
        });
        var realeunum=item.realeunum;
//        layer.msg(realeunum);
        table.render({
            elem: '#djdy'
            ,url:'getPledgeinfoListByRealeunum?realeunum='+realeunum
            ,cellMinWidth: 60 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'checkbox'}
                ,{field:'casenum', title: '流程号'}
                ,{field:'realeunum', title: '不动产单元号'}
                ,{field:'hypotheca', title: '抵押权人'}
                ,{field:'pledgor', title: '抵押人'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'plemode', title: '抵押类型'}
                ,{field:'plerange', title: '抵押范围'}
                ,{field:'pleamount', title: '抵押金额'}
                ,{field:'plebegindate',  title: '抵押起始日期', sort: true}
                ,{field:'pleenddate',  title: '抵押终止日期', sort: true}
                ,{field:'pleorder',  title: '抵押序号', sort: true}
                ,{field:'realestateproofnum',  title: '抵押证明号'}
                ,{field:'unregplecasenum',  title: '注销业务编号'}
                ,{field:'unregisterdate',  title: '注销日期', sort: true}
                ,{field:'infostate',  title: '状态', sort: true}
            ]]
        });
        table.render({
            elem: '#djcf'
            ,url:'getSealupinfoListByRealeunum?realeunum='+realeunum
            ,cellMinWidth: 60 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'checkbox'}
                ,{field:'casenum', title: '流程号'}
                ,{field:'realeunum', title: '不动产单元号'}
                ,{field:'seaorgname', title: '查封单位'}
                ,{field:'seatype', title: '查封类型'}
                ,{field:'seafile', title: '查封文件'}
                ,{field:'seanum', title: '查封文号'}
                ,{field:'seabegindate',  title: '查封起始日期', sort: true}
                ,{field:'seaenddate',  title: '查封终止日期', sort: true}
                ,{field:'seaorder',  title: '查封序号', sort: true}
                ,{field:'registerdate',  title: '登记日期', sort: true}
                ,{field:'unregseacasenum',  title: '解封业务号'}
                ,{field:'unregseaorgname',  title: '解封单位'}
                ,{field:'unregseafile',  title: '解封文件'}
                ,{field:'unregseanum',  title: '解封文号'}
                ,{field:'unregseadate',  title: '注销日期'}
                ,{field:'infostate',  title: '状态', sort: true}
            ]]
        });
        table.render({
            elem: '#djyg'
            ,url:'getPrereginfoListByRealeunum?realeunum='+realeunum
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'checkbox'}
                ,{field:'casenum', title: '流程号'}
                ,{field:'realeunum', title: '不动产单元号'}
                ,{field:'obligeename', title: '权利人'}
                ,{field:'obligorname', title: '义务人'}
                ,{field:'preregtype', title: '预告类型'}
                ,{field:'planuse', title: '规划用途'}
                ,{field:'buildarea',  title: '建筑面积', sort: true}
                ,{field:'realestateproofnum',  title: '不动产证明号', sort: true}
                ,{field:'infomemo',  title: '备注', sort: true}
                ,{field:'registerdate',  title: '登记日期', sort: true}
                ,{field:'infostate',  title: '状态', sort: true}
            ]]
        });
    });

    /*房屋列表点击*/
    $("#fwlist2").on("click","a",function () {
        var liid=$(this).attr("id");

        console.log($(this).attr("id"));
        var item=resStore[liid];
        console.log(item);
        /*隐藏不动产的*/
        $("li[name='fc']").show();
        $("li[name='dj']").hide();

        /*自动填充权利信息*/
        $('#syq').autofill(item);

        $("li[name='fc']").eq(0).trigger("click");


        var keycode=item.keycode;
 /*       table.render({
            elem: '#djdy'
            ,url:'getPledgeinfoListByRealeunum?realeunum='+realeunum
            ,cellMinWidth: 60 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'checkbox'}
                ,{field:'casenum', title: '流程号'}
                ,{field:'realeunum', title: '不动产单元号'}
                ,{field:'hypotheca', title: '抵押权人'}
                ,{field:'pledgor', title: '抵押人'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'plemode', title: '抵押类型'}
                ,{field:'plerange', title: '抵押范围'}
                ,{field:'pleamount', title: '抵押金额'}
                ,{field:'plebegindate',  title: '抵押起始日期', sort: true}
                ,{field:'pleenddate',  title: '抵押终止日期', sort: true}
                ,{field:'pleorder',  title: '抵押序号', sort: true}
                ,{field:'realestateproofnum',  title: '抵押证明号'}
                ,{field:'unregplecasenum',  title: '注销业务编号'}
                ,{field:'unregisterdate',  title: '注销日期', sort: true}
                ,{field:'infostate',  title: '状态', sort: true}
            ]]
        });
        table.render({
            elem: '#djcf'
            ,url:'getSealupinfoListByRealeunum?realeunum='+realeunum
            ,cellMinWidth: 60 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'checkbox'}
                ,{field:'casenum', title: '流程号'}
                ,{field:'realeunum', title: '不动产单元号'}
                ,{field:'seaorgname', title: '查封单位'}
                ,{field:'seatype', title: '查封类型'}
                ,{field:'seafile', title: '查封文件'}
                ,{field:'seanum', title: '查封文号'}
                ,{field:'seabegindate',  title: '查封起始日期', sort: true}
                ,{field:'seaenddate',  title: '查封终止日期', sort: true}
                ,{field:'seaorder',  title: '查封序号', sort: true}
                ,{field:'registerdate',  title: '登记日期', sort: true}
                ,{field:'unregseacasenum',  title: '解封业务号'}
                ,{field:'unregseaorgname',  title: '解封单位'}
                ,{field:'unregseafile',  title: '解封文件'}
                ,{field:'unregseanum',  title: '解封文号'}
                ,{field:'unregseadate',  title: '注销日期'}
                ,{field:'infostate',  title: '状态', sort: true}
            ]]
        });
        table.render({
            elem: '#djyg'
            ,url:'getPrereginfoListByRealeunum?realeunum='+realeunum
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type:'checkbox'}
                ,{field:'casenum', title: '流程号'}
                ,{field:'realeunum', title: '不动产单元号'}
                ,{field:'obligeename', title: '权利人'}
                ,{field:'obligorname', title: '义务人'}
                ,{field:'preregtype', title: '预告类型'}
                ,{field:'planuse', title: '规划用途'}
                ,{field:'buildarea',  title: '建筑面积', sort: true}
                ,{field:'realestateproofnum',  title: '不动产证明号', sort: true}
                ,{field:'infomemo',  title: '备注', sort: true}
                ,{field:'registerdate',  title: '登记日期', sort: true}
                ,{field:'infostate',  title: '状态', sort: true}
            ]]
        });*/
    });

    $("#printBtn").click(function(){

//        layer.msg("打印");
        $("input[class='#fwlist']:checked").each(function(){

            $href=$(this).next();
            var idid=$href.attr("id");
            layer.msg(JSON.stringify(resStore[idid]));

//            layer.msg($(this).next());
        });
    });


</script>

</body>

</html>
